<template>
  <div class="flex flex-wrap items-center btn-list">
    <template v-for="item in actionList" :key="item.key">
      <el-button
        v-if="
          isFunction(item.hiddenHandle)
            ? !item.hiddenHandle(handleVal(row))
            : !item.hidden
        "
        :class="[link ? '' : 'my-[.5em]']"
        :disabled="
          isFunction(item.disableHandle)
            ? item.disableHandle(handleVal(row))
            : item.disabled
        "
        :type="item.status ?? 'primary'"
        :plain="item.plain"
        :link="link"
        @click="actionClick(item)"
      >
        {{ te(item.name) ? $t(item.name) : item.name }}
      </el-button>
      <el-divider
        v-if="
          link &&
          (isFunction(item.hiddenHandle)
            ? !item.hiddenHandle(row)
            : !item.hidden)
        "
        direction="vertical"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ActionsProps } from "../type";
import { useI18n } from "vue-i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { toRaw } from "vue";
import { isFunction } from "@pureadmin/utils";
import { handleVal } from "@/components/AuTable/src/tools";

defineOptions({
  name: "BtnList"
});

const { te } = useI18n();
const emits = defineEmits(["actionClick"]);
defineProps({
  actionList: {
    type: Array<ActionsProps>,
    default: () => []
  },
  circle: {
    type: Boolean,
    default: false
  },
  link: {
    type: Boolean,
    default: false
  },
  row: {
    type: Object,
    default: () => ({})
  }
});

const actionClick = async (item: ActionsProps) => {
  emits("actionClick", item);
};
</script>

<style lang="scss">
.btn-list {
  .el-divider:last-child {
    display: none;
  }
}
</style>
